<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-privacy-policy-container`]">
      <view class="logout-card">
        <p class="title">请问您注销的原因是</p>
        <uv-radio-group v-model="radiovalue" placement="column" iconPlacement="right">
          <uv-radio :customStyle="{ margin: '12px' }" v-for="(item, index) in logoutList" :key="index" :label="item.text" :name="item.id" @change="onChange(item)"> </uv-radio>
        </uv-radio-group>
        <uv-textarea v-if="isReason" v-model="value" count maxlength="300" placeholder="请输入注销的原因"></uv-textarea>
      </view>
      <view class="button-wrap">
        <!-- <view class="skip" @click="confirm">跳过</view> -->
        <view class="submit" :style="{ background: isSubmit ? '#046f7b' : '#d7d7d7' }" @click="handleSubmit">提交</view>
      </view>
    </view>
    <uv-modal
      ref="modal"
      title="注销账号确认"
      content="注销后您的账号将无法恢复，账号和资产中的权益将视为自动放弃，确认要注销吗？"
      :showCancelButton="true"
      cancelText="取消"
      confirmText="确认"
      confirmColor="#046f7b"
      @confirm="confirm"
    ></uv-modal>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { causeList } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      logoutList: [],
      radiovalue: '',
      isReason: false,
      value: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin']),
    isSubmit() {
      return this.isReason ? this.value != '' : this.radiovalue != ''
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { data } = await causeList()
      this.logoutList = data
    },
    onChange({ type }) {
      this.isReason = type == '0'
    },
    confirm() {
      this.$ROUTE.go('/pages/subpackage/privacy-policy/logout-phone')
    },
    handleSubmit() {
      if (!this.isSubmit) {
        return
      }
      this.$refs.modal.open()
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5 !important;
}
.#{prefixCls('privacy-policy-container')} {
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 0 32rpx;
  overflow: hidden;
  .logout-card {
    width: 100%;
    background: white;
    border-radius: 16rpx;
    margin-top: 32rpx;
    overflow: hidden;
    .title {
      margin: 15px 15px 0;
      padding-bottom: 15px;
      border-bottom: 1px solid #f1f1f1;
    }
    ::v-deep .uv-textarea {
      margin: 32rpx;
    }
  }
  .button-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    left: 0;
    text-align: center;
    .skip {
      flex: 1;
      margin-bottom: 20px;
    }
    .submit {
      flex: 1;
      background: #d7d7d7;
      border-radius: 20px;
      padding: 10px 30px;
      margin: 0 30px 20px;
      color: white;
      font-weight: bold;
    }
  }
}
</style>
